<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Analyse</title>
    <script src="../static/js/echarts.min.js"></script>
    <script src="../static/js/jquery.min.js"></script>
    <link href="/static/css/reset.css"  type="text/css" rel="stylesheet">

</head>
<body>
    <a href="index.html">
        <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-reply-all" viewBox="0 0 16 16">
            <path d="M8.098 5.013a.144.144 0 0 1 .202.134V6.3a.5.5 0 0 0 .5.5c.667 0 2.013.005 3.3.822.984.624 1.99 1.76 2.595 3.876-1.02-.983-2.185-1.516-3.205-1.799a8.74 8.74 0 0 0-1.921-.306 7.404 7.404 0 0 0-.798.008h-.013l-.005.001h-.001L8.8 9.9l-.05-.498a.5.5 0 0 0-.45.498v1.153c0 .108-.11.176-.202.134L4.114 8.254a.502.502 0 0 0-.042-.028.147.147 0 0 1 0-.252.497.497 0 0 0 .042-.028l3.984-2.933zM9.3 10.386c.068 0 .143.003.223.006.434.02 1.034.086 1.7.271 1.326.368 2.896 1.202 3.94 3.08a.5.5 0 0 0 .933-.305c-.464-3.71-1.886-5.662-3.46-6.66-1.245-.79-2.527-.942-3.336-.971v-.66a1.144 1.144 0 0 0-1.767-.96l-3.994 2.94a1.147 1.147 0 0 0 0 1.946l3.994 2.94a1.144 1.144 0 0 0 1.767-.96v-.667z"></path>
            <path d="M5.232 4.293a.5.5 0 0 0-.7-.106L.54 7.127a1.147 1.147 0 0 0 0 1.946l3.994 2.94a.5.5 0 1 0 .593-.805L1.114 8.254a.503.503 0 0 0-.042-.028.147.147 0 0 1 0-.252.5.5 0 0 0 .042-.028l4.012-2.954a.5.5 0 0 0 .106-.699z"></path>
        </svg>
    </a>
    <br>
    <br>
  <div id="container" style="width: 1400px;height:600px;"></div>
  <script type="text/javascript">
    var dom = document.getElementById('container');
    var myChart = echarts.init(dom, null, {
      renderer: 'canvas',
      useDirtyRect: false
    });
    var app = {};
    
    var option;

    // prettier-ignore
const data = [["芜湖青椒(1)", 28164.33100000042], ["西兰花", 27537.227999999166], ["净藕(1)", 27149.44000000034], ["大白菜", 19187.218000000375],
    ["云南生菜", 15910.461000000087], ["金针菇(盒)", 15596.0], ["云南生菜(份)", 14325.0], ["紫茄子(2)", 13602.00100000012], ["西峡香菇(1)", 11920.227000000103], ["小米椒(份)", 10833.0]];
const data1 = [["花叶类", 331968], ["水生根茎类", 58647], ["辣椒类", 207996], ["食用菌", 148424], ["茄类", 44898], ["花菜类", 86570]];
const dateList = data.map(function (item) {
  return item[0];
});
const valueList = data.map(function (item) {
  return item[1];
});
const dateList1 = data1.map(function (item) {
  return item[0];
});
const valueList1 = data1.map(function (item) {
  return item[1];
});
option = {
  // Make gradient line here
  visualMap: [
    {
      show: false,
      type: 'continuous',
      seriesIndex: 0,
      min: 0,
      max: 400
    },
    {
      show: false,
      type: 'continuous',
      seriesIndex: 1,
      dimension: 0,
      min: 0,
      max: dateList.length - 1
    }
  ],
  title: [
    {
      left: 'center',
      text: '销售总重量最高的前10的蔬菜统计'
    },
    {
      top: '50%',
      left: 'center',
      text: '不同种类蔬菜的销售总数量'
    }
  ],
  tooltip: {
    trigger: 'axis'
  },
  xAxis: [
    {
      data: dateList
    },
    {
      data: dateList1,
      gridIndex: 1
    }
  ],
  yAxis: [
    {},
    {
      gridIndex: 1
    }
  ],
  grid: [
    {
      bottom: '60%'
    },
    {
      top: '60%'
    }
  ],
  series: [
    {
      type: 'line',
      showSymbol: false,
      data: valueList
    },
    {
      type: 'line',
      showSymbol: false,
      data: valueList1,
      xAxisIndex: 1,
      yAxisIndex: 1
    }
  ]
};

    if (option && typeof option === 'object') {
      myChart.setOption(option);
    }

    window.addEventListener('resize', myChart.resize);
  </script>
</body>
</html>